<template>
  <div class="footer">
    <div class="btn" @click="jumpLink('https://x.com/BlockJokerCoin')">
      <div class="icon x"></div>
      <span class="text">@blockjokercoin</span>
    </div>
    <div class="btn" @click="jumpLink('https://x.com/i/communities/1891149726873251970')">
      <div class="icon joker"></div>
      <span class="text">Joker Club</span>
    </div>
  </div>
</template>

<script setup>
const jumpLink = (url) => {
  window.open(url)
}
</script>

<style lang="less" scoped>
.footer {
  width: 1250px;
  margin: 240px auto 0;
  padding: 40px 0 60px;
  color: #0f0;
  position: relative;
  text-align: center;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 15%,
        rgba(0, 246, 255, 0.15) 20%,
        rgba(0, 246, 255, 0.15) 80%,
        transparent 85%,
        transparent 100%
    );
  }

  .btn {
    cursor: pointer;
    display: inline-block;
    padding: 4px 12px 5px;
    height: 36px;
    width: 194px;
    margin: 0 80px 0 0;
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
    color: rgba(0, 246, 255, 0.9);
    background: rgba(0, 246, 255, 0.08);
    border: 1px solid var(--border-normal);

    &:last-child {
      margin: 0;
    }

    .icon {
      display: inline-block;
      height: 18px;
      width: 18px;
      margin: 0 8px 0 0;
      font-family: "Source Code Pro", monospace;
      font-size: 18px;
      color: rgba(0, 246, 255, 0.9);
      position: relative;
      top: 4px;

      &.x {
        background: url(../assets/images/x_blue.svg) center center no-repeat;
        background-size: 16px 16px;
      }
      &.joker {
        background: url(../assets/images/JokersCircle.svg) center center no-repeat;
        background-size: 16px 16px;
      }
    }
    .text {
      display: inline-block;
      font-family: Orbitron, sans-serif;
      font-size: 12px;
      letter-spacing: 1.5px;
      color: rgba(0, 246, 255, 0.9);
    }

    &:hover {
      background: rgba(0, 246, 255, 0.08);
      border-color: rgba(0, 246, 255, 0.4);
      box-shadow: 0 0 15px rgba(0, 246, 255, 0.2);
    }
  }
}

@media (max-width: 900px) {
  .footer {
    width: auto;
    .btn {
      margin: 0 20px 0 0;
      width: 80px;

      .icon {
        margin: 0;
      }

      .text {
        display: none;
      }
    }
  }
}
</style>